<template>
	<jk-dialog
		v-model="showDialog"
		:title="`品种修正`"
		width="900px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="saveBtnLoading"
		:show-confirm-btn="pageType !== 'detail'"
		:show-cancel-btn="pageType !== 'detail'"
		:show-close-btn="pageType === 'detail'"
		@on-close="onVisibleChange(false)"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<el-form
			ref="ruleForm"
			:model="ruleForm"
			:rules="rules"
			:hide-required-asterisk="pageType === 'detail' || ruleForm.auditState === 1"
			label-width="110px"
			:show-message="false"
		>
			<div ref="box1">
				<div class="flex-start-center margin-bottom-4" style="font-size: 13px;">
					<el-tag type="primary" effect="plain" class="">
						<span class="el-icon-tickets item-gap"></span>
						<span>基本信息</span>
					</el-tag>
				</div>
				<jk-card>
					<el-row class="flex-start-center-wrap">
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="细络联品种">
								<span class="read-only-2">{{ ruleForm.productName || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="细络联批号">
								<span class="read-only-2">{{ ruleForm.batchCode || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="细络联管色">
								<span class="read-only-2">{{ ruleForm.paperTubeList ? ruleForm.paperTubeList.map(x =>
									x.name).join(',') : '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="细络联品种">
								<span class="read-only-2">{{ ruleForm.pinzhong || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="细络联批号">
								<span class="read-only-2">{{ ruleForm.pihao || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="打包机管色">
								<span class="read-only-2">{{ ruleForm.guanse || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-0" label="备注">
								<span v-if="pageType === 'detail' || ruleForm.auditState === 1" class="read-only-2">{{ ruleForm.remark }}</span>
								<el-input v-else v-model="ruleForm.remark" :rows="1" type="textarea" placeholder="请输入..." />
							</el-form-item>
						</el-col>
					</el-row>
				</jk-card>
			</div>
			<div class="margin-bottom-4 flex-between-center margin-top-10">
				<el-tag effect="plain">
					<span class="el-icon-s-order item-gap"></span>
					<span>生产通知单列表</span>
				</el-tag>
				<div class="flex-start-center">
					<jk-search-input v-model="searchParams.productName" class="search-bar-item-size3 item-gap" placeholder="品种"></jk-search-input>
					<jk-search-input v-model="searchParams.batchCode" class="search-bar-item-size2 item-gap" placeholder="批号"></jk-search-input>
					<jk-search-input v-model="searchParams.colorName" class="search-bar-item-size2 item-gap" placeholder="管色"></jk-search-input>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
			<jk-table
				:row-config="{ isCurrent: true }"
				:data="tableData || []"
				size="mini"
				:max-height="dialogTableHeight - 20"
				:loading="tableLoading"
				@radio-change="radioChangeEvent"
			>
				<vxe-column :width="50" align="center" type="seq" title="序号"></vxe-column>
				<vxe-column title="纸管颜色" align="left" field="paperTubeList" :min-width="100">
					<template slot-scope="scope">
						<span>{{ scope.row.paperTubeList ? scope.row.paperTubeList.map(x => x.name).join(',') : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column :min-width="150" field="productName" title="品种"></vxe-column>
				<vxe-column :min-width="150" field="batchCode" title="批号"></vxe-column>
				<vxe-column :width="150" align="left" field="code" title="通知单号"></vxe-column>
			</jk-table>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionLabellingMachineRecordUpdatePrdNotice,
        productionProcessPrdNoticeGetByBatchProductColor
    } from '../../../../api/production/package';
    import { tipsBar } from '../../../../utils/jk/jk-tool';
    export default {
        mixins: [calHeight],
        props: {
            pageType: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                searchParams: {
                    productName: '',
                    batchCode: '',
                    colorName: '',
                    pageNo: 1,
                    pageSize: 100
                },
                tableLoading: false,
                saveBtnLoading: false,
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                saveDialogState: false,
                ruleForm: {},
                rules: {
                    typeId: [{ required: true, trigger: 'change' }]
                },
                tableData: [],
                selectItem: {}
            };
        },
        methods: {
            onSearchBtn() {
                this.getListRequest();
            },
            radioChangeEvent(e) {
                this.selectItem = e.row;
            },
            getParamData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                params.prdNoticeIdNew = this.selectItem.id;
                params.mateState = true;
                params.prdNoticeCodeNew = this.selectItem.code;
                return params;
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid && Object.keys(this.selectItem).length) {
                        if (this.ruleForm.pinzhong === this.selectItem.productName && this.ruleForm.pihao === this.selectItem.batchCode) {
                            this.createAndUpdateRequest();
                        } else {
                            this.$msgbox({
                                title: '消息',
                                message: `品种或批号和打包机不一致，确定保存吗？`,
                                iconClass: 'el-icon-question',
                                showCancelButton: true,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                beforeClose: (action, instance, done) => {
                                    if (action === 'confirm') {
                                        instance.confirmButtonLoading = true;
                                        instance.confirmButtonText = '执行中...';
                                        this.createAndUpdateRequest().then(() => {
                                            instance.confirmButtonLoading = false;
                                            instance.confirmButtonText = '确定';
                                            done();
                                        });
                                    } else {
                                        done();
                                    }
                                }
                            });
                        }
                    } else {
                        tipsBar(this, 'custom', 'warning', '请选择通知单!');
                    }
                });
            },
            createAndUpdateRequest() {
                this.saveBtnLoading = true;
                return productionLabellingMachineRecordUpdatePrdNotice(this.getParamData()).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish', res.data.res);
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getListRequest() {
                this.tableLoading = true;
                this.selectItem = {};
                return productionProcessPrdNoticeGetByBatchProductColor(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res || [];
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getListRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.ruleForm = this.dataItem ? JSON.parse(JSON.stringify(this.dataItem)) : {};
                    this.$set(this.searchParams, 'productName', this.ruleForm.pinzhong);
                    this.$set(this.searchParams, 'batchCode', this.ruleForm.pihao);
                    this.$set(this.searchParams, 'colorName', this.ruleForm.guanse);
                    this.getDependentData();
                }
            }
        }
    };
</script>
